// export const menu = [
//   {
//     id: "1", // 菜单id
//     name: "web前端", // 菜单名称
//     codeName: "WebH5",
//     type: 0, // 0模块 1目录 2 菜单 3按钮
//     url: "/webH5", // 路径
//     icon: "", // icon
//     children: [
//       {
//         id: 11, // 菜单id
//         name: "webpack", // 菜单
//         codeName: "Webpack", // 菜单名称
//         type: 2, // 1目录 2 菜单 3按钮
//         url: "", // 路径
//         icon: "", // icon
//         children: null,
//         parentId: 1,
//       },
//     ],
//   },
// ];
import { defineStore } from "pinia";
import { ref, computed, watch, onMounted } from "vue";
import { menu } from "@/api/menu.ts";
import { useRoute } from "vue-router";

export const useMenuStore = defineStore("menuData", () => {
  const menuList = ref<{ name: string; codeName: string; children?: any }[]>(
    []
  );
  const route = useRoute();
  // 一级默认
  const activeIndex = ref<any>("");
  // 获取
  const getMenuList = () => {
    menu().then((res) => {
      menuList.value = res.data;
    });
  };

  // 一级级菜单
  let topMenu = computed(() => {
    return menuList.value.find((item) => item.codeName === activeIndex.value);
  });
  // 二级菜单
  let subMenu = computed(() => {
    return topMenu.value?.children || [];
  });
  // 二级默认
  const subActiveIndex = ref("");
  watch(activeIndex, () => {
    if (subMenu.value?.length) {
      subActiveIndex.value = subMenu.value[0]?.codeName;
    }
  });
  onMounted(() => {
    activeIndex.value = route.meta.name;
  });
  return {
    menuList,
    subMenu,
    activeIndex,
    subActiveIndex,
    getMenuList,
  };
});
